Automate JavaScript compression with YUI Compressor and /packer/

Posted 2007-12-17 in JavaScript by Johann.

JavaScript compression should be one of the finishing touches to your website, like optimizing your images with OptiPNG and other automated optimizations. Shrinking the size of your JavaScript code will make your site load faster and your visitors happier.

In this blog entry, I will show you how to automatically compress your various JavaScript source files into one single compressed file. The tools I will use is the YUI Compressor and Dean Edward’s /packer/.

Prerequisites

1. Create the following folders:
   • js for the compressed JavaScript.
   • js-in for the input files.
   • packer for /packer/.
   • yui for YUI Compressor.
2. Download YUI Compressor.
3. Extract yuicompressor-2.2.5.jar to the yui directory.
4. Download Rhino.
5. Extract js.jar to packer.
6. Download packer.js (originally written by David McNab) to packer.

Create the batch file

Copy the following code to a file called pack.bat and save it to your js folder.

type ..\js-in\* > jb.js
java -jar ..\yui\yuicompressor-2.2.5.jar -o jb-yui.js jb.js
cd ..\packer
java -jar js.jar packer.js ..\js\jb-yui.js ..\js\jb.js
cd ..\js
del jb-yui.js

(Replace jb with the name of your site or something similar.)

Tips

• If you use multiple input files, you should name them like this:
  • 10-jquery-1.2.1.js
  • 20-jquery.inc-5.js
  • 30-menu.js
  This ensures that your files are compressed in the right order.

2 comments